@import "src/assets/styles/mixins";
@import "src/assets/styles/variables";

.profileInfoWrapper {
  background-color: $primaryBg;
  grid-area: profile;

  .profileInfo {
    padding: 0 50px 45px;
    position: relative;
    display: flex;
    align-items: center;

    img {
      height: 250px;
      width: 250px;
      margin-top: -100px;
      @include roundedBox();
    }

    .userName {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .description {
      margin-left: 16px;
    }

    .profileLinksWrapper {
      padding: 0;
      margin-bottom: 0;
      position: absolute;
      right: 50px;
      bottom: 45px;
    }

    .additionalInfo {
      .additionalInfoField {
        display: flex;
        gap: 4px;
        margin-bottom: 4px;

        :last-child {
          margin-bottom: 0;
        }
      }

      .additionalInfoFieldTitle {
        font-weight: 600;
        color: $primaryTextColor;
      }

      .additionalInfoFieldText {
        color: $secondaryTextColor;
      }
    }
  }
}